<template>
	<view class="content">
		<view class="navbar">
				<view v-for="(item, index) in navList" :key="index" class="nav-item"  @click="tabClick(index)">
				<view>{{item.text}}</view>
				<view v-show="tabCurrentIndex==index" class="show_border"></view>
				<text v-if="item.num>0" class="ms-num">{{item.num}}</text>
			</view>
		</view>
		

		<view class="list-item"  v-for="(item, index) in orderList" :key="index">
			<view class="dis-flex" style="flex-direction: row;padding: 22rpx;">
				<view class="font-w600" style="flex: 1;font-size: 34rpx;">{{item.shop_info.name}} ></view>
				<view class="order-status">{{item.status_tip}}</view>
			</view>
			<view class="dis-flex" @click="toDetail(item.id)">
				<view class="list-img">
					<image :src="item.goods_snap.discover" mode="aspectFill"></image>
				</view>
				<view class="list-title">
					<view class="list-title-name">{{item.goods_snap.title}}</view>
					<view class="list-detail">
						<view style="flex: 1;width: 200rpx;">下单日期:{{item.xd_date}}</view>
					</view>
					<view class="list-op">
						<view class="font-w600">{{item.goods_snap.score}}积分</view>
					</view>
				</view>
			</view>
			
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import listCell from '@/components/mix-list-cell';
	import Api from '@/common/api';
	export default {
		components: {
			uniLoadMore,
			
			listCell
		},
		data() {
			return {
				page: 1,
				size: 10,
				more_data: true,
				loaded:false,
				tabCurrentIndex: 0,
				orderList: [],
				loadingType: 'more',
				navList: [{
						state: 0,
						text: '全部',
						num: 0
					},
					{
						state: 1,
						text: '待使用',
						num: 0
					},
					{
						state: 2,
						text: '已使用',
						num: 0
					},
					{
						state: 3,
						text: '已过期',
						num: 0
					}
				],
			};
		},
		
		onLoad(options) {
			
		},
		onShow(){
			this.page=1;
			this.orderList=[];
			this.more_data=true;
			this.loadData();
			this.orderCount();
		},
		// 页面触底事件，加载下一页
		onReachBottom() {
			this.loadData()
		},
		methods: {
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/order/orderExchangeDetail?id=' + id
				})
			},
			async orderCount(){
				let data = await Api.apiCall('get', Api.apiName.goods_order_count, {},true);
				if (!data) { //出错时
					return;
				}
				let res = data.data;
				this.navList.map((item,index)=>{
					res.map((_item,_index)=>{
						if(item.state==_item.status){
							item.num=_item.total;
							return;
						}
					})
				})	
			},
			//获取订单列表
			async loadData(source) {
				if (!this.more_data) {
					return; //没有数据不请求
				}
				//这里是将订单挂载到tab列表下
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let state = navItem.state;

				if (this.loadingType === 'loading') {
					//防止重复加载
					return;
				}

				this.loadingType = 'loading';
				let params = {
					page: this.page,
					size: this.size,
					state: state
				};
				let data = await Api.apiCall('get', Api.apiName.goods_order_lists, params);
				if (!data) { //出错时
					this.loadingType = 'noMore'
					return;
				}

				setTimeout(() => {

					this.orderList = this.orderList.concat(data.data)
					// loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.loaded = true;
					//判断是否还有数据， 有改为 more， 没有改为noMore
					if (data.data.length > 0 && data.data.length == this.size) {
						this.page++;
						this.loadingType = 'more';
					} else {
						this.loadingType = 'nomore';
						this.more_data = false;

					}

				}, 600);
			},

			//顶部tab点击
			tabClick(index) {
				this.page = 1;
				this.loaded = false;
				this.orderList = [];
				this.tabCurrentIndex = index;
				this.more_data = true;
				this.loadData();
			},
			//删除订单
			deleteOrder(index) {
				uni.showLoading({
					title: '请稍后'
				})
				setTimeout(() => {
					this.navList[this.tabCurrentIndex].orderList.splice(index, 1);
					uni.hideLoading();
				}, 600)
			},
		},
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	
	.dis-flex{
		display: flex;
	}
	.navbar {
		display: flex;
		height: 100rpx;
		padding: 12rpx 30rpx;
		white-space: nowrap;
		overflow-x: scroll;
		background: #FFFFFF;
		margin-top: 2rpx;
		position: relative;
		z-index: 10;

		.nav-item {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			padding: 0rpx 30rpx;
			position: relative;
			flex-direction: column;
			width: 25%;
			justify-content: center;
		}
	}

	.diyCurrent {
		font-weight: 600;
	}

	.diyCurrent::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 23%;
		width: 50%;
		/* 或者你希望的特定长度 */
		height: 2px;
		/* 边框线的高度 */
		background: #0191FF;

	}

	.navbar::-webkit-scrollbar {
		display: none;
	}
	.show_border{
		border: 1px solid #000000;
		width: 50%;
		height: 2rpx;
	}

	.ms-num {
		position: absolute;
		top: 14rpx;
		right: 18rpx;
		font-size: 16rpx;
		border-radius: 50%;
		width: 26rpx;
		height: 26rpx;
		background: #FF0000;
		line-height: 26rpx;
		text-align: center;
		color: #FFFFFF;
	}
	.course_content{
		height: 100vh;
		background: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999999;
	}
	.list-item {
		display: flex;
		background: #FFFFFF;
		margin: 12rpx;
		border-radius: 20rpx;
		flex-direction: column;
	}

	.list-img {
		padding: 20rpx;
		image {
			display: inline-block;
			width: 230rpx;
			height: 230rpx;
			border-radius: 20rpx;
		}
	}

	.list-title {
		margin-left: 20rpx;
		margin-top: 30rpx;
		font-size: 14px;
		width: 100%;
	}

	.list-title-name {
		font-size: 30rpx;
		font-weight: 600;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 430rpx;
	}

	.list-detail {
		display: flex;
		color: #999999;
		margin-top: 46rpx;
		font-size: 24rpx;
	}

	.list-op {
		margin-top: 54rpx;
		display: flex;
		color: #ff0000;
		align-items: center;
	}
	.pad-r22{
		padding-right: 22rpx;
	}
	.font-w600{
		font-weight: 600;
	}

	.order-status{
		font-size: 30rpx;
		color:#999999;
	}
</style>